<template>
	<view class="u-p-l-30 u-p-r-30 u-p-t-30">
		<u-form :model="form" ref="uForm" :error-type="errorType">
			<u-form-item label="昵称" prop="name">
				<u-input v-model="form.name" />
			</u-form-item>
		</u-form>
		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType: ['message'],
				form: {
					name: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入昵称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'blur',
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.form.name = this.vuex_user.name
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(async v => {
					const flag = this.form.name === this.vuex_user.name;
					if (!v) return;
					if (flag) {
						this.$u.toast('用户名未更改，提交不了');
						return;
					};
					await this.$u.api.userChange(this.form);
					// 更新用户信息
					this.$u.utils.updateUser();
					this.$u.toast('用户名修改成功')
					// console.log(v, flag);
					// console.log(res);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.baseInfo {
		width: 80%;
		margin: 0 auto;
	}
</style>
